<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../store/useAuthStore'
import { ElMessage } from 'element-plus'

const router = useRouter()
const authStore = useAuthStore()

// 定义历史记录的类型
interface HistoryRecord {
  id: number;
  date: string;
  size: string;
  type: string;
  status: string;
  url: string;
}

// 用户信息
const user = computed(() => authStore.user)

// 加载状态
const loading = ref(false)

// 处理历史记录
const histories = ref<HistoryRecord[]>([])
const historyLoading = ref(false)

// 统计数据
const stats = ref({
  processed: 0,
  storage: 0,
  remainingCredits: 0
})

// 加载用户统计数据
const loadUserStats = async () => {
  try {
    loading.value = true
    // 这里应该调用API获取用户统计数据
    // const response = await api.getUserStats()
    
    // 模拟数据
    stats.value = {
      processed: 45,
      storage: 120, // MB
      remainingCredits: 55
    }
  } catch (error) {
    console.error('加载用户统计数据失败:', error)
    ElMessage.error('加载用户统计数据失败')
  } finally {
    loading.value = false
  }
}

// 加载用户处理历史
const loadUserHistory = async () => {
  try {
    historyLoading.value = true
    // 这里应该调用API获取用户历史记录
    // const response = await api.getUserHistory()
    
    // 模拟数据
    histories.value = [
      { id: 1, date: '2023-12-01', size: '2.5MB', type: 'image', status: 'completed', url: '#' },
      { id: 2, date: '2023-12-03', size: '1.8MB', type: 'image', status: 'completed', url: '#' },
      { id: 3, date: '2023-12-05', size: '3.2MB', type: 'image', status: 'processing', url: '#' }
    ]
  } catch (error) {
    console.error('加载用户历史记录失败:', error)
    ElMessage.error('加载用户历史记录失败')
  } finally {
    historyLoading.value = false
  }
}

// 前往账号设置
const goToSettings = () => {
  router.push('/account/settings')
}

// 初始化
onMounted(() => {
  // 确保用户数据是最新的
  if (authStore.isAuthenticated) {
    authStore.loadUserFromStorage()
  }
  
  // 加载其他数据
  loadUserStats()
  loadUserHistory()
})
</script>

<template>
  <div class="user-container">
    <div class="user-header">
      <h1 class="text-2xl font-bold mb-6">用户中心</h1>
    </div>
    
    <el-row :gutter="20">
      <!-- 用户信息卡片 -->
      <el-col :xs="24" :md="8">
        <el-card class="user-info-card">
          <div class="user-avatar">
            <el-avatar :size="80" :src="user?.avatar || ''" icon="user" />
          </div>
          <div class="user-details">
            <h2 class="text-xl font-semibold">{{ user?.username || '未登录' }}</h2>
            <p class="text-gray-500">{{ user?.email || '无邮箱信息' }}</p>
            <p class="text-gray-500">{{ user?.role === 'admin' ? '管理员' : '普通用户' }}</p>
          </div>
          <div class="user-actions">
            <el-button type="primary" @click="goToSettings">账号设置</el-button>
          </div>
        </el-card>
      </el-col>
      
      <!-- 统计信息卡片 -->
      <el-col :xs="24" :md="16">
        <el-card class="stats-card">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ stats.processed }}</div>
                <div class="stat-label">已处理文件</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ stats.storage }} MB</div>
                <div class="stat-label">存储空间</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ stats.remainingCredits }}</div>
                <div class="stat-label">剩余积分</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 处理历史 -->
    <el-card class="history-card">
      <template #header>
        <div class="card-header">
          <h3 class="text-lg font-semibold">处理历史</h3>
          <el-button text>查看全部</el-button>
        </div>
      </template>
      
      <el-table
        :data="histories"
        v-loading="historyLoading"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="date" label="处理日期" width="180" />
        <el-table-column prop="size" label="文件大小" width="120" />
        <el-table-column prop="type" label="文件类型" width="120" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'completed' ? 'success' : 'warning'">
              {{ scope.row.status === 'completed' ? '处理完成' : '处理中' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button v-if="scope.row.status === 'completed'" link type="primary" size="small">
              下载
            </el-button>
            <el-button link type="danger" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.user-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.user-header {
  margin-bottom: 1.5rem;
}

.user-info-card {
  margin-bottom: 1.5rem;
  text-align: center;
}

.user-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.user-details {
  margin-bottom: 1.5rem;
}

.stats-card {
  margin-bottom: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: #606266;
}

.history-card {
  margin-bottom: 1.5rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .user-container {
    padding: 1rem;
  }
}
</style> 